<template>
  <div class="container">
    <div class="Statistics-container">
      <a href="https://kingdata.jinse.com/"><img class="sc-logo" src="@/assets/images/logo.png" alt="" /></a>
      <img class="sc-txt" src="@/assets/images/text-big.png" alt="" />
      <a class="nav-btn" href="/detail">
        <img class="btn-img" src="@/assets/images/button-2.png" alt="" />
      </a>
      <div class="content">
        <p class='chart-title'>DeFi总锁仓量趋势以及每日发生的事件数</p>
        <div class="chart-container" ref="chart"></div>
        <ul class="screen-list">
          <li v-for="(item,index) in screenList" :key="index" @click="onScreen(item.type)">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div class="news-container">
      <p class="date">{{ nowDate }}</p>
      <div class="list">
        <template v-for="(item, index) in currentNews">
          <v-news :key="index" :content="item"></v-news>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
var echarts = require('echarts');
import vNews from "@/components/news.vue";
const news = require("../../static/data/news.json");
const events = require("../../static/data/events.json");
const datas = require("../../static/data/defi.json");
const moment = require("moment");
import { $tools } from '../utils/tools'
import {formatBigNum, formatOriginDefiData, formatOriginNews, filterNews} from '@/utils/helper'
import { groupBy } from 'lodash'

export default {
  name: "index",
  components: {
    vNews,
  },
  data() {
    const currentDate = moment('2020-09-03').format('YYYY/MM/DD')
    const originNews = formatOriginNews(news)
    return {
      nowDate: currentDate,
      originNews: originNews,
      groupedByDayNews: groupBy(originNews, 'day'),
      currentNews: filterNews(originNews, currentDate),
      datas: formatOriginDefiData(datas),
      screenList:[
          {
              name:'全部',
              type:1
          },
          {
              name:'近1个月',
              type:2
          },
          {
              name:'近3个月',
              type:3
          },
          {
              name:'近6个月',
              type:4
          },
          {
              name:'近1年',
              type:5
          },
      ]
    };
  },
  computed:{

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chart = this.$refs.chart;
      this.myChart = echarts.init(chart);
      this.option = {
        grid:[
          {
            left:0,
            right:0,
            containLabel: true,
            show: false,
            borderColor: '#fff',
            tooltip: {
              show: true
            }
          }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false,
                lineStyle: {
                  color: '#ea99517a'
                }
            },
            // formatter: '{b0}: {c0}<br />{b1}: {c1}'
        },
        dataZoom: [
          {
            show: true,
            type: "slider",
            xAxisIndex: 0,
            backgroundColor: "rgba(255, 132, 19, 0.04)",
            fillerColor: "rgba(255, 132, 19,0.12)",
            handleStyle: {
              color: "#FF8413",
            },
            textStyle:{
                color:'#c4c4c4',
                fontSize:10
            },
            bottom: 0,
            startValue:'2020/07/30',
            endValue:'2020/09/30',
            orient: "horizontal",
            showDetail:true
          },
        ],
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisTick: {
            length: 1,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#f2f2f2"
            }
          },
          axisLabel: {
            color: "#c4c4c4",
            fontSize: 10,
            align: "center",
            width: 100,
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            lineStyle: {
              color: "#ddd"
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontSize: 10,
            color: "#a3a3a3",
            verticalAlign:'bottom',
            formatter: formatBigNum
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#F0F0F0",
            },
          },
        },
        series: [
          {
            name: "总锁仓金额",
            type: "line",
            smooth: true,
            barWidth: 40,
            symbol: (value, params) => {
              var key = value[0];
              var newsData = this.groupedByDayNews[key];
              if (newsData && newsData.length > 0) {
                return "circle";
              } else {
                return "none";
              }
            },
            symbolSize:(value,params) =>{
              var key = value[0];
              var newsData = this.groupedByDayNews[key];
              if(newsData){
                var newsCount = newsData.length
                  return 2 + parseInt(newsCount * 1.2);
              }
            },
            symbolKeepAspect: true,
            itemStyle: {
                normal: {
                    color: 'rgba(53,162,255,0.5)'
                }
            },
            cursor: 'default',
            showAllSymbol: true,
            hoverAnimation: false,
            data: this.datas,
            lineStyle: {
              color:'#35A2FF',
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0.5,
                y: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(53, 162, 255, 0.3)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(53, 162, 255, 0.2)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      this.setChart();
      this.myChart.on('mousemove', 'series.line', (params)=>{
          var key = params.name
          this.nowDate = key
          this.currentNews = filterNews(this.originNews, this.nowDate)
      })
    },
    setChart() {
        setTimeout(()=>{
          this.myChart.setOption({
              series: [{
                  data: this.datas
              }]
          });
        },1000)
      if (this.option && typeof this.option === "object") {
        this.myChart.setOption(this.option, true);
      }
    },
    onScreen(type){
        switch(type){
            case 1:
                this.myChart.setOption({
                dataZoom: [{
                    startValue:'2018/01/01',
                    endValue:'2020/09/30',
                    }]
                });

            break;
            case 2:
                this.myChart.setOption({
                dataZoom: [{
                    startValue:'2020/08/30',
                    endValue:'2020/09/30',
                    }]
                });
            break;
            case 3:
                this.myChart.setOption({
                dataZoom: [{
                    startValue:'2020/06/30',
                    endValue:'2020/09/30',
                    }]
                });
                break;
            case 4:
                this.myChart.setOption({
                dataZoom: [{
                    startValue:'2020/03/30',
                    endValue:'2020/09/30',
                    }]
                });
                break;
            case 5:
                this.myChart.setOption({
                dataZoom: [{
                    startValue:'2019/09/30',
                    endValue:'2020/09/30',
                    }]
                });
                break;

        }
    }
  },
};
</script>
<style scoped>
.container {
  /*background-color: #e5e5e5;*/
}
.Statistics-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../assets/images/Rectangle.png) no-repeat;
  background-size: 100% auto;
  padding: 0 12px;
}
.Statistics-container .sc-logo {
  margin-top: 33px;
  height: 19px;
  width: auto;
}
.Statistics-container .sc-txt {
  margin-top: 20px;
  height: 40px;
  width: auto;
}
.Statistics-container .nav-btn {
  margin-top: 20px;
  display: inline-block;
}
.Statistics-container .nav-btn .btn-img {
  height: 43px;
  width: auto;
}
.Statistics-container .content {
  background-color: #fff;
  border-radius: 8px 8px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 17px 0 0;
  padding: 0 12.5px;
}
.Statistics-container .chart-container{
    height: 270px;
}
.Statistics-container .content .screen-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.Statistics-container .content .screen-list li {
  display: inline-block;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  border-radius: 30px;
  border: 1px solid #efefef;
  background-color: rgba(147, 147, 147, 0.06);
  font-size: 13px;
  color: #939393;
}

.news-container {
  margin: 0 12px;
  padding: 0 12px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
}
.news-container .date {
  padding: 16px 0 0;
  font-size: 17px;
  color: #333;
  line-height: 24px;
}
.news-container .list {
}
.chart-title {
  height: 0;
  text-align: center;
  padding-top: 14px;
  font-size: 14px;
  color: #999;
}
</style>
